<div fxFlex
     fxLayout="row">

  <section fxFlex
           fxLayout="column"
           class="scrollable"
           style="padding: 8px; margin-right: 8px;">

    <mat-card *ngFor="let draggable of draggables"
              [dndDraggable]="draggable.content"
              [dndEffectAllowed]="draggable.effectAllowed"
              [dndDisableIf]="draggable.disable"
              (dndStart)="onDragStart($event)"
              (dndCopied)="onDragged($event, 'copy')"
              (dndLinked)="onDragged($event, 'link')"
              (dndMoved)="onDragged($event, 'move')"
              (dndCanceled)="onDragged($event, 'none')"
              (dndEnd)="onDragEnd($event)">

      <mat-icon *ngIf="draggable.handle"
                mat-list-icon
                dndHandle>drag_handle
      </mat-icon>

      draggable ({{draggable.effectAllowed}})
      <span [hidden]="!draggable.handle"> only with handle</span>
      <span [hidden]="!draggable.disable"> DISABLED</span>

    </mat-card>

    <mat-card [dndDraggable]="draggableWithDragImage"
              [dndEffectAllowed]="draggableWithDragImage.effectAllowed"
              [dndDisableIf]="draggableWithDragImage.disable"
              (dndStart)="onDragStart($event)"
              (dndCopied)="onDragged($event, 'copy')"
              (dndLinked)="onDragged($event, 'link')"
              (dndMoved)="onDragged($event, 'move')"
              (dndCanceled)="onDragged($event, 'none')"
              (dndEnd)="onDragEnd($event)">

      <mat-icon *ngIf="draggableWithDragImage.handle"
                mat-list-icon
                dndHandle>drag_handle
      </mat-icon>

      draggable ({{draggableWithDragImage.effectAllowed}})
      <span [hidden]="!draggableWithDragImage.handle"> only with handle</span>
      <span [hidden]="!draggableWithDragImage.disable"> DISABLED</span>

      <div dndDragImageRef>MY_CUSTOM_DRAG_IMAGE</div>

    </mat-card>

    <mat-card [dndDraggable]="draggableWithDragImage"
              [dndEffectAllowed]="draggableWithDragImage.effectAllowed"
              [dndDisableIf]="draggableWithDragImage.disable"
              (dndStart)="onDragStart($event)"
              (dndCopied)="onDragged($event, 'copy')"
              (dndLinked)="onDragged($event, 'link')"
              (dndMoved)="onDragged($event, 'move')"
              (dndCanceled)="onDragged($event, 'none')"
              (dndEnd)="onDragEnd($event)">

      <dnd-indirect-handle></dnd-indirect-handle>

      draggable ({{draggableWithDragImage.effectAllowed}})

      <dnd-indirect-drag-image>I'm the drag image but pssst</dnd-indirect-drag-image>

    </mat-card>

  </section>

  <div fxFlex="25"
       fxFlex.gt-xs="33"
       fxFlex.lt-md="50"
       fxLayout="column"
       class="layout-padding">

    <mat-slide-toggle [checked]="dropzoneEnabled"
                      (change)="dropzoneEnabled = $event.checked">Dropzone enabled
    </mat-slide-toggle>

    <section fxFlex
             fxLayout="column"
             fxLayoutAlign="center center"
             class="my-dropzone scrollable"
             dndDropzone
             dndDragoverClass="custom-drag-over"
             [dndDisableIf]="!dropzoneEnabled"
             (dndDrop)="onDrop($event)">

      <pre *ngIf="lastDropEvent">{{ lastDropEvent | json }}</pre>

    </section>
  </div>

</div>
